<template>
	<view style="padding: 32rpx;">
		<scroll-view scroll-y class="box">
			<view class="item" v-for="item in bluetooth.blueDeviceList" @click="bluetooth.connect(item)">
				<view>
					<text>id: {{ item.deviceId }}</text>
				</view>
				<view>
					<text>name: {{ item.name }}</text>
				</view>
			</view>
		</scroll-view>

		<button @click="initBlue">1 初始化蓝牙</button>

		<button @click="discovery">2 搜索附近蓝牙设备</button>

		<button @click="getServices">3 获取蓝牙服务</button>

		<button @click="haracteristics">4 获取特征值</button>

		<button @click="notify">5 开启消息监听</button>

		<button @click="send">6 发送数据</button>

		


		<view class="">
			功能模块
		</view>


		<view class="u-f-ac">
			<input class="input" type="text" v-model="date" placeholder="用逗号隔开">
			<button type="primary" class="btn" @click="setTime">设置时间</button>
		</view>
		<view class="u-f-ac">
			<input class="input" type="number" v-model="min" placeholder="时间">
			<button type="primary" class="btn" @click="timeOut">倒计时</button>
		</view>
		<!-- <view class="u-f-ac">
			<input class="input" type="text" v-model="name" placeholder="名字">
			<button type="primary" class="btn" @click="setName">蓝牙改名</button>
		</view> -->
		<view class="u-f-ac">
			<input style="width: 150rpx;" class="input" type="text" v-model="temperature" placeholder="温度">
			<input style="width: 150rpx;" class="input" type="text" v-model="humidity" placeholder="湿度">
			<button type="primary" class="btn" @click="setTemperature">温度/湿度</button>
		</view>
		<view class="">
			闹钟
		</view>
		<view class="" style="border: 1rpx solid #999;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="" :key="index" v-for="(item, index) in weekList"
				style="border-bottom: 1rpx solid #eee;margin-bottom: 20rpx;">
				<checkbox-group @change="checkboxChange($event, index)" class="u-f">
					<label v-for="it in item.week" :key="it">
						<checkbox :value="it.name" checked="true" />{{ it.name }}
					</label>

				</checkbox-group>
				<view class="u-f-ac" style="margin-top: 10rpx;">
					<picker mode="time" :value="item.time" @change="bindTimeChange($event, index)">
						<view class="uni-input">{{ item.time }}</view>
					</picker>

					<switch color="#FFCC33" @change="switch1Change($event, index)" style="transform:scale(0.7)" /> 开关
				</view>

			</view>
			

			<button type="primary" class="btn" style="width: 200rpx;margin-top: 20rpx;" @click="setClock">设置闹钟</button>
			<button type="primary" class="btn" style="width: 200rpx;margin-top: 20rpx;" @click="getClick">读取闹钟</button>
		</view>
		
		<view class="" style="border: 1rpx solid #999;padding-bottom: 20rpx;padding-top: 20rpx;margin-top: 32rpx;">
			温湿度上下限报警
			<view class="u-f-ac">
				
				<input style="width: 150rpx;" class="input" type="text" v-model="alarmData.temperature" placeholder="温度">
				<input style="width: 150rpx;" class="input" type="text" v-model="alarmData.humidity" placeholder="湿度">
				<input style="width: 150rpx;" class="input" type="text" v-model="alarmData.luminance" placeholder="亮度 0-10">
			</view>
			<switch color="#FFCC33" @change="changeAlarm($event,'status')" style="transform:scale(0.7)" /> 报警开关
			<switch color="#FFCC33" @change="changeAlarm($event,'luminanceStatus')" style="transform:scale(0.7)" /> 亮度开关
			
				<!-- <text style="color: red;">同时只能设置一个 要么湿度温度，要么亮度，不能同时设置</text> -->
				<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="setAlarm('h')">上限设置</button>
				<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="setAlarm('l')">下限设置</button>
				<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="setAlarm('u')">亮度设置</button>
				<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="getAlarm()">警数据读取</button>
				<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="getAlarmData">设置数据读取</button>
				<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="getALrmReply">警数据上报回复</button>
			</view>

		<!-- <button type="primary" class="btn" @click="cleanData">清除历史数据</button> -->

	<view class="u-f-ac">
		<button type="primary" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="setListen('0x01')">开启实时温度湿度</button>
		<button type="default" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="setListen('0x00')">关闭实时温度湿度</button>
	</view>
	
	<button type="default" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="getHisData()">历史数据启动上报</button>
	<button type="default" class="btn" style="width: 400rpx;margin-top: 20rpx;" @click="getHisReply()">历史数据接收回复</button>
		<view class="msg_x">

			<view class="msg_hex">
				监听到的内容（十六进制）：{{ messageHex }}
			</view>
		</view>
	</view>
</template>

<script >
import bluetoothClass from '../../utils/bluetooth.js'
export default {
	data() {
		return {
			bluetooth: null,
			min: '',
			date: '2023,04,03,14,12,11',
			name: '',
			temperature: '',
			humidity: '',
			luminance:"",
			alarmData:{
				temperature: '',
				humidity: '',
				luminance:"",
				type:'',
				status:false, //报警开关
				luminanceStatus:false, //报警开关
			},
			weekList: [{
				week: [
					{
						value: '周一',
						name: '周一',
						checked: true
					},
					{
						value: '周二',
						name: '周二',
						checked: true
					},
					{
						value: '周三',
						name: '周三',
						checked: true
					},
					{
						value: '周四',
						name: '周四',
						checked: true
					},
					{
						value: '周五',
						name: '周五',
						checked: true
					},
					{
						value: '周六',
						name: '周六',
						checked: true
					},
					{
						value: '周日',
						name: '周日',
						checked: true
					}],
				time: '请选择时间',
				checked: false,
				selList: []
			},
			{
				week: [
					{
						value: '周一',
						name: '周一',
						checked: true
					},
					{
						value: '周二',
						name: '周二',
						checked: true
					},
					{
						value: '周三',
						name: '周三',
						checked: true
					},
					{
						value: '周四',
						name: '周四',
						checked: true
					},
					{
						value: '周五',
						name: '周五',
						checked: true
					},
					{
						value: '周六',
						name: '周六',
						checked: true
					},
					{
						value: '周日',
						name: '周日',
						checked: true
					}],
				time: '请选择时间',
				checked: false,
				selList: []
			},
			{
				week: [
					{
						value: '周一',
						name: '周一',
						checked: true
					},
					{
						value: '周二',
						name: '周二',
						checked: true
					},
					{
						value: '周三',
						name: '周三',
						checked: true
					},
					{
						value: '周四',
						name: '周四',
						checked: true
					},
					{
						value: '周五',
						name: '周五',
						checked: true
					},
					{
						value: '周六',
						name: '周六',
						checked: true
					},
					{
						value: '周日',
						name: '周日',
						checked: true
					}],
				time: '请选择时间',
				checked: false,
				selList: []
			}
			]

		};
	},
	computed: {
		messageHex() {
			if (this.bluetooth) {
				return this.bluetooth.messageHex
			}
		},
	},
	onLoad() {

		uni.$on('listenHandle',(res)=>{
			console.log(res);
		})
		this.bluetooth = new bluetoothClass()
		this.bluetooth.initBlue()


		 let arr=[ 55,'aa','0b',22,'00','00','03',14,13,'0a',16,'05',25,'09','9f',]
		 

	},
	methods: {
		getALrmReply(){
			
			this.bluetooth.getALrmReply()
		},
		getHisReply(){
			this.bluetooth.getHisReply()
		},
		getAlarmData(){
			this.bluetooth.getAlarmData()
		},
		getHisData(){
			this.bluetooth.getHisData()
		},
		setListen(type){
			this.bluetooth.setListen(type)
		},
		getAlarm(){
			this.bluetooth.getAlarm()
		},
	changeAlarm(e,name){
			this.alarmData[name] = e.detail.value
			},
		setAlarm(type){
			this.alarmData.type=type
			this.bluetooth.setAlarm(this.alarmData)
		},
		setClock() {
			this.bluetooth.setClock(this.weekList)
		},
		getClick(){
			this.bluetooth.getClick()
		},
		switch1Change(e, index) {
			console.log(e.detail.value)
			this.weekList[index].checked = e.detail.value
		},
		bindTimeChange(e, index) {
			console.log(e.detail.value);
			this.weekList[index].time = e.detail.value
		},
		checkboxChange(e, index) {
			
			this.weekList[index].selList = e.detail.value
			this.weekList[index].week.forEach((item, idx) => {
				let flag = false
				e.detail.value.forEach(data => {
					if (item.value == data) {
						flag = true
					}
				})
				if (flag) {
					this.weekList[index].week[idx].checked = true
				} else {
					this.weekList[index].week[idx].checked = false
				}
			})
			console.log(this.weekList[index]);
		},
		setTemperature() {
			this.bluetooth.setTemperature(this.temperature, this.humidity)
		},
		timeOut() {

			this.bluetooth.timeOut(this.min)
		},
		setName() {
			this.bluetooth.setName(this.name)
		},

		setTime() {
			this.bluetooth.setTime(this.date)
		},
		initBlue() {
			this.bluetooth.initBlue()
		},
		discovery() {
			this.bluetooth.discovery()
		},
		getServices() {
			this.bluetooth.getServices()
		},
		haracteristics() {
			this.bluetooth.haracteristics()
		},
		notify() {
			this.bluetooth.notify()
			uni.$on('listenHandle',(res)=>{
				console.log(res);
			})
		},
		send() {
			this.bluetooth.send()
		},

	}
}




</script>

<style>
.input {
	border: 1px solid #999;
	padding: 0 28rpx;
}

.u-f {
	display: flex;
}

.u-f-ac {
	display: flex;
	align-items: center;
}

.box {
	width: 98%;
	height: 400rpx;
	box-sizing: border-box;
	margin: 0 auto 20rpx;
	border: 2px solid dodgerblue;
}

.item {
	box-sizing: border-box;
	padding: 10rpx;
	border-bottom: 1px solid #ccc;
}

button {
	margin-bottom: 20rpx;
}

.msg_x {
	border: 2px solid seagreen;
	width: 98%;
	margin: 10rpx auto;
	box-sizing: border-box;
	padding: 20rpx;
}

.msg_x .msg_txt {
	margin-bottom: 20rpx;
}
</style>
